<template>
    
    <div class="banner">
        <div class="mr-slider mr-slider-default scoll" data-mr-flexslider id="demo-slider-0">
            <div id="box">
                <ul id="imagesUI" class="list">
                    <transition-group name="fade" tag="div">
                        <li v-for="(v,i) in banner" :key="i" v-if="(i+1) == index? true : false"><img :src="v"></li>

                    </transition-group>
                </ul>
                <ul id="btnUI" class="count">
                    <li v-for="num in 4 " :key="num" @mouseover="change(num)" :class="{current:num==index}">
                        {{ num }}
                    </li>

                </ul>
            </div>
        </div>
        <div class="clear">

        </div>

    </div>

 <!--   <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-item" v-for="(item,index) in imageuel" :key="index">
                <img :src="item" />
            </div>
        </div>
    </div>-->


</template>

<script>
/*
export default {
    name:'swiper',
    data(){
        return {
            imageuel:[
            new URL('./assets/img/a.jpg', import.meta.url).href,

            new URL('./assets/img/b.jpg', import.meta.url).href,
            new URL('./assets/img/c.jpg', import.meta.url).href,
            new URL('./assets/img/d.jpg', import.meta.url).href

            ]
        }
    },
    } */ 

//import { Flag } from '@element-plus/icons-vue/dist/types';


export default {
    name: 'banner',
    data: function() {
        return {

            banner: [//图片路径
                new URL('./assets/img/e.jpg', import.meta.url).href,

                new URL('./assets/img/b.jpg', import.meta.url).href,
                new URL('./assets/img/c.jpg', import.meta.url).href,
                new URL('./assets/img/d.jpg', import.meta.url).href
            
                //require('../assets/img/a.jpg'),
               // require('../assets/img/b.jpg'),
                //require('../assets/img/c.jpg'),
                //require('../assets/img/d.jpg')
            ],
            index: 1 ,//当前图片索引
            flag:true,
            timer :"",//定时器

        }
    },
    methods: {
        //定义下一张图片
        next: function() {
            this.index = this.index +1 == 5? 1 : this.index + 1;
        },
        //切换图片
        change: function(num) {
            if(this.flag)
                this.flag = false; //停止定时器
            setTimeout(() => {
                
                this.flag = true; 
            },1000); //开启定时器
            this.index = num;//切换图片索引
            clearTimeout(this.timer); //清除定时器
            //每隔3秒切换下一张图片
            this.timer = setTimeout(this.next, 3000);
                
        }
    },
    mounted() {
        //初始化定时器
        this.timer = setTimeout(this.next, 3000);
    }
}
              

</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 1s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}


</style>